<template>
    <div class="flex justify-center">
        <div
            class="w-1/2 bg-blue-900 rounded-lg shadow px-6 py-12 flex flex-col items-center"
        >
            <div class="bg-gray-400 rounded-full flex justify-around p-1">
                <button
                    @click="currentBillingCycle = frequency"
                    v-for="(price, frequency) in plans[0].pricing"
                    class="rounded-full text-xs font-bold px-6 py-1 uppercase focus:outline-none"
                    :class="
                        currentBillingCycle == frequency
                            ? 'bg-blue-600 text-gray-200'
                            : ''
                    "
                >
                    {{ frequency }}
                </button>
            </div>

            <div class="flex w-full pt-8">
                <div v-for="plan in plans" class="text-white text-center w-1/2">
                    <h1 class="text-2xl font-bold">{{ plan.name }}</h1>

                    <ul class="pt-4">
                        <li
                            v-for="benefit in plan.benefits[
                                currentBillingCycle
                            ]"
                        >
                            {{ benefit }}
                        </li>
                    </ul>

                    <div class="flex justify-center pt-8">
                        <div class="text-4xl font-bold">
                            {{
                                getPrice(
                                    plan.pricing[currentBillingCycle].price
                                )
                            }}
                        </div>
                        <div class="pl-1 pt-2 text-gray-300">
                            {{ plan.pricing[currentBillingCycle].label }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="pt-4 text-center text-gray-400 text-sm font-bold">
                <a href="#" @click.prevent="currency = 'usd'">USD</a> |
                <a href="#" @click.prevent="currency = 'eur'">EUR</a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        getPrice(price) {
            return this["currency" + this.currency.toUpperCase()](price);
        },

        currencyUSD(price) {
            return "$" + price;
        },

        currencyEUR(price) {
            return "€" + Math.ceil(price * 0.93);
        },
    },

    data() {
        return {
            currentBillingCycle: "month",
            currency: "usd",

            plans: [
                {
                    name: "Starter",
                    benefits: {
                        month: ["Benefit 1", "Benefit 2", "Benefit 3"],
                        year: [
                            "Benefit 1",
                            "Benefit 2",
                            "Benefit 3",
                            "Benefit 4",
                        ],
                        lifetime: [
                            "Benefit 1",
                            "Benefit 2",
                            "Benefit 3",
                            "Benefit 4",
                            "Benefit 5",
                        ],
                    },

                    pricing: {
                        month: { price: 99, label: "/mo" },
                        year: { price: 499, label: "/yr" },
                        lifetime: { price: 1200, label: "" },
                    },
                },

                {
                    name: "Pro",
                    benefits: {
                        month: ["Benefit 1", "Benefit 2", "Benefit 3"],
                        year: [
                            "Benefit 1",
                            "Benefit 2",
                            "Benefit 3",
                            "Benefit 4",
                        ],
                        lifetime: [
                            "Benefit 1",
                            "Benefit 2",
                            "Benefit 3",
                            "Benefit 4",
                            "Benefit 5",
                        ],
                    },

                    pricing: {
                        month: { price: 199, label: "/mo" },
                        year: { price: 999, label: "/yr" },
                        lifetime: { price: 2200, label: "" },
                    },
                },

                {
                    name: "All-Star",
                    benefits: {
                        month: ["Benefit 1", "Benefit 2", "Benefit 3"],
                        year: [
                            "Benefit 1",
                            "Benefit 2",
                            "Benefit 3",
                            "Benefit 4",
                        ],
                        lifetime: [
                            "Benefit 1",
                            "Benefit 2",
                            "Benefit 3",
                            "Benefit 4",
                            "Benefit 5",
                        ],
                    },

                    pricing: {
                        month: { price: 399, label: "/mo" },
                        year: { price: 1399, label: "/yr" },
                        lifetime: { price: 4999, label: "" },
                    },
                },
            ],
        };
    },
};
</script>

<style></style>
